<!--全局小播放器 -->
<template>
  <div class="normal-player-container">
    <!-- 背景 -->
    <div class="background">
      <img :src="currentSong.al.picUrl" width="100%" height="100%" alt="" />
    </div>
    <!-- 蒙层 -->
    <div class="background layer"></div>
    <!-- 头部 -->
    <div class="top">
      <div class="back" @click="leaveFullScreen">
        <i class="iconfont icon-xiangxia"></i>
      </div>
      <h1 class="title">{{ currentSong.name }}</h1>
      <h2 class="subtitle">{{ currentSong.ar }}</h2>
    </div>
    <!-- 中间唱片 -->
    <div class="middle">
      <div class="CD-wrapper">
        <img
          class="image"
          :class="{ pause: !playing }"
          :src="currentSong.al.picUrl"
          alt=""
        />
      </div>
    </div>

    <!-- 底部操作按键 -->
    <div class="bottom">
      <!-- <bar-progress v-model="progress"></bar-progress> -->
      <bar-progress
        :value="progress"
        @input="changeProgressAction"
        @touchstart="handleTouchAction('start')"
        @touchend="handleTouchAction('end')"
        :currentTime="currentTime"
        :duration="duration"
      ></bar-progress>
      <div class="operators">
        <div class="icon i-left" @click="changeBoAction">
          <!-- <i class="iconfont icon-23_shunxubofang"></i> -->
          <!-- <i class="iconfont icon-suijibofang"></i> -->
          <!-- <i class="iconfont icon-ziyuan"></i> -->
          <i class="iconfont" :class="type"></i>
        </div>
        <div class="icon i-left" @click="prevAction">
          <i class="iconfont icon-shangyiqu101"></i>
        </div>
        <div class="icon i-center">
          <i
            class="iconfont"
            @click="changePlayingAction"
            :class="{ 'icon-bofang': !playing, 'icon-zanting1': playing }"
          ></i>
        </div>
        <div class="icon i-right" @click="nextAction">
          <i class="iconfont icon-xiayiqu101"></i>
        </div>
        <div class="icon i-right">
          <i class="iconfont icon-yinleliebiao"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarProgress from "./children/bar-progress";
import { mapState } from "vuex";
export default {
  components: {
    BarProgress,
  },
  props: {
    currentTime: Number,
    duration: Number,
    progress: Number,
  },
  data() {
    return {
      // progress:0.3,
      // currentSong: {
      //   id: 1812673579,
      //   name: "等你归来",
      //   ar: "程响",
      //   al: {
      //     name: "等你归来",
      //     picUrl:
      //       "https://p1.music.126.net/bisOFZHy6WuBBfaHtr238Q==/109951165674729204.jpg",
      //   },
      // },
    };
  },
  watch: {
    currentTime() {
      // console.log(this.currentTime,this.duration)
      if (this.currentTime === this.duration) {
        this.nextAction()
      }

    }
  },
  computed: {
    // 把仓库的state转为组件的计算属性
    ...mapState({
      playing: (state) => state.Player.playing,
      mode: (state) =>  state.Player.mode,
      currentSong: (state) => state.Player.currentSong
    }),
    // 获取仓库中当前播放的歌曲
    // ...mapGetters({
    //   currentSong: "Player/currentSong",
    // }),
    // 获取icon的类属性
    type() {
      if(this.mode === 0) {
        return 'icon-23_shunxubofang'
      } else if (this.mode === 1) {
        return 'icon-ziyuan'
      } else {
        return 'icon-suijibofang'
      }
    }
  },
  methods: {
    // 点击退出全屏播放
    leaveFullScreen() {
      console.log("leave");
      this.$store.commit({
        type: "Player/setFullScreen",
        value: false,
      });
    },
    changePlayingAction() {
      // console.log(this.progress)
      // console.log("改变",value)
      // 让仓库修改playing的值
      this.$store.commit({
        type: "Player/setPlaying",
        value:!this.playing
      });
    },
   // 修改进度条的事件
    changeProgressAction(newValue) {
      // console.log(newValue);
      this.$emit('change', newValue)
    },
    // 处理触摸事件改变的函数
    handleTouchAction(flag) {
      this.$emit('touchChange', flag)
    },
    changeBoAction() {
      console.log('改变播放方式')
      this.$store.commit({
        type: 'Player/changeType',
      })
    },
    // 点击播放上一首
    prevAction() {
      console.log('上一首')
      this.$store.commit({
        type: 'Player/prevHandler'
      })
    },
    // 点击播放下一首
    nextAction() {
      console.log('下一首')
      this.$store.commit({
        type: 'Player/nextHandler'
      })
    },
  },
  
};
</script>

<style lang="scss" scoped>
.normal-player-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
  filter: blur(20px);
  &.layer {
    background: #aaa;
    opacity: 0.8;
    filter: none;
  }
}
.top {
  position: relative;
  margin-bottom: 25px;
  .back {
    position: absolute;
    top: 0;
    left: 6px;
    .iconfont {
      display: block;
      padding: 9px;
      font-size: 24px;
      color: #333;
      font-weight: bold;
      // transform: rotate(90deg);
    }
  }
  .title {
    width: 70%;
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #333;
  }
  .subtitle {
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #666;
  }
}
.middle {
  position: absolute;
  margin: auto;
  top: 100px;
  left: 0;
  right: 0;
  width: 70%;
  height: 70vw;
  box-sizing: border-box;
  .CD-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: 50%;
      border: 20px solid #222;
      animation: roate 20s linear infinite;
      &.pause {
        animation-play-state: paused;
      }
    }
  }
}
.bottom {
  position: absolute;
  left: 0;
  bottom: 50px;
  width: 100%;
  .operators {
    margin-top: 10px;
    display: flex;
    align-items: center;
    .icon {
      font-weight: bold;
      flex: 1;
      color: #2e3030;
      text-align: center;
      .iconfont {
        font-size: 24px;
      }
    }
  }
}
</style>